<template>
  <el-tabs
    :model-value="activeMenu"
    type="card"
    class="demo-tabs"
    closable
    @tab-change="changeTab"
    @tab-remove="removeTab"
    size="small"
  >
    <el-tab-pane v-for="item in routeHistoryStore.historySet" :key="item.fullPath" :label="item.meta.name" :name="item.fullPath">
    </el-tab-pane>
  </el-tabs>
</template>

<script setup>
import { useRouteHistoryStore } from '@/stores/modules/routeHistory'
import { findRouteResult } from '@/router'

const route = useRoute()
const { push, getRoutes } = useRouter()

const routeHistoryStore = useRouteHistoryStore()

const changeTab = (targetName) => {
  push(targetName)
}
const removeTab = async (targetName) => {
  routeHistoryStore.historyRemove(targetName)
  await nextTick()
  const result = routeHistoryStore.historySet.find((v) => v.fullPath === activeMenu.value)
  if (!result) {
    push(routeHistoryStore.historySet[routeHistoryStore.historySet.length - 1].path)
  }
}

const activeMenu = computed(() => {
  const result = routeHistoryStore.historySet.find((v) => v.fullPathpath === route.fullPath)
  if (!result) {
    if (route.meta.currentActiveMenu) {
      return route.meta.currentActiveMenu
    }
  }
  return route.fullPath
})
</script>

<style lang="scss" scoped>
:deep(.el-tabs__header.is-top) {
  margin: 0;
  border-bottom: none;
}
:deep(.el-tabs__item.is-top.is-active.is-closable) {
  color: #fff;
  background-color: var(--el-color-primary);
}
</style>
